
@extends( 'common.header' )

<!--  添加meta csrf_token -->
<meta name="csrf-token" content="{{ csrf_token() }}">  

<script src=" {{ asset('/js/jquery-1.8.3.min.js') }} "></script>
<script>
	<!-- 2.设置全局ajax选项 -->
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});
	var _token = $('meta[name="csrf-token"]').attr('content');

	$(function(){
		
		// 上传图片按钮 文件名显示
		$("#upFiles").on("change", function(){
			var str = '';
			$("#fileName").html(str);
			// 清空展示区域
			$(".picShow").html(str);
			// 原生js
			var obj = document.getElementById("upFiles");
			// 获取文件个数
			var length = obj.files.length;
			for( var i=0;i<length;i++ ){
				// 获取文件名
				var tempName = obj.files[i].name;
				str += tempName + "\n";
			}
			// 预览图片
			$("#fileName").append(str);
		});	
		
		// 点击 创建 编辑
		$("button").click(function(){
			
			// 声明 表单对象
			var formData = new FormData();
			// 获取 文件个数
			var length = $("#upFiles")[0].files.length;
			formData.append( "file",$("#upFiles")[0].files[0] );
			
			// token
			formData.append("_token",_token);
			
			// 获取 链接地址
			var next_url = $("input[name='next_url']").val();
			formData.append("next_url",next_url);
			
			var shuId = $("#picEdit").attr('shuId');
			if( shuId!='' )
			{
				// 编辑
				var url ="{{ url('/shuffling/docreate') }}"+'/'+shuId;
			}else
			{
				// 创建
				var url ="{{ url('/shuffling/docreate') }}";
			}
			
			$.ajax({
				type:"post",
				url:url,
				data:formData,
				async:true,    						
				dataType:"json",
				// 告诉jQuery不要去处理发送的数据
				processData : false, 
				// 告诉jQuery不要去设置Content-Type请求头
				contentType : false,
				success:function(back){
					$('#show_info').html( '' );
					$('#show_info').html( back['show_info'] );
					if( back['show_info']=='添加轮播成功' || back['show_info']=='修改 轮播 成功' )
					{
						location.href="{{ url('/shuffling/index') }}";
					}
				}
			});
		});

	});
</script>

<body >

<div id="picEdit" picUrl="{{ $shuffling_info->pic_url or ''  }}"  shuId = "{{ $shuffling_info->id or ''  }}"></div>

<br/><br/><br/><br/><br/><br/><br/>



<div class="col-xs-6 col-md-1">
</div>
<!-- 页面标记 -->
<div class="col-xs-6 col-md-2">
	<mark style="color:#32CD32;font-size:25px;">{{ $title or '' }}</mark>
</div>
<div class="col-xs-12 col-sm-6 col-md-5">
	<!-- 添加图片 -->
	<div  class="form-group">
		<label class="col-sm-2 control-label">添加图片</label>
		<div class="col-sm-10" style="background:url({{ asset('/images/login/upload.jpg')}} );background-size:50px;width:50px;height:50px;margin-left:15px;border-radius:360px;">
			<!-- 文本域 -->
			<input type="file" style="width:50px;height:50px; margin-left:-15px;opacity:0;cursor:pointer;"  name="imgs" id="upFiles" />
		</div>
		<div style="float:left;width:200px;height:auto;word-wrap: break-word;margin-left:10px;color:black;" id="fileName">
		</div>
	</div>
	
	<!-- 图片展示区域 -->
	<div class="picShow" style='margin-left:17%;width:450px;'  >
		@if( isset($shuffling_info) )
		<img style='width:350px;margin-right:17%;margin-top:5px;margin-bottom:20px;border-radius:5px;' src="{{ $shuffling_info->pic_url }}" />
		@else
		@endif
	</div>
	
	<br/>
	<br/>
	<br/>
	
	<!-- 链接地址 -->
	<div  class="form-group">
		<label class="col-sm-2 control-label">链接地址</label>
		<div class="col-sm-10">
			<input type="text" name="next_url" value="{{ $shuffling_info->next_url or '' }}" style="width:300px;"  class="form-control"   placeholder="链接地址" />
		</div>
	</div>
	
	<br/>
	<br/>
	<br/>
	
	@if( isset($shuffling_info) )
		<!-- 编辑 -->
		<button  style="width:300px;margin-left:8%;" data-toggle="modal" data-target=".bs-example-modal-sm" class="btn btn-danger" >
			修改
		</button>
	@else
		<!-- 创建  -->
		<button  style="width:300px;margin-left:8%;" data-toggle="modal" data-target=".bs-example-modal-sm" class="btn btn-danger" >
			添加
		</button>
	@endif
	
	<div  class="form-group" style="margin-top:20px;">
		<a href="javascript:history.back();" style="width:300px;margin-left:8%;" class="btn btn-success">
			返回
		</a>
	</div>
</div>
<div class="col-xs-6 col-md-4">

</div>

	
	
<!--  模态框 不要动 -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
	<div class="modal-dialog modal-sm" role="document" id='show_info'  style="margin-top:5%;margin-left:45%;color:white;font-size:20px;">
	</div>
</div>
	

	
	
	
	
	


</body>

@extends('common.footer')